<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-35-t </title>
 <style type="text/css">
 <!--
 .bodytext    { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
 .pageTitle         { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
 .pageSubTitle  { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
 .openChapter   { color : blue; line-height: 125%; font-weight : 900 }
 .openSection   { color : blue; line-height: 125%; font-weight : 900 }
 .info  { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
 p          { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<center>
 <div class="linkbar"><p> 

	spec link:<a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a>
	, <a href="full-animate-elem-35-t.html">Full version</a>
	, <a href="basic-animate-elem-35-t.html">Basic version</a>
	, <a href="tiny-animate-elem-35-t.html">Tiny version</a></p>
 <p>
				<a href="tiny-animate-elem-34-t.html">animate-elem-34-t <img border="0" alt="navigate left" src="../images/nav_left.png"/></a> 
				<a href="tiny-index.html"> index </a>
				<a href="tiny-animate-elem-36-t.html"><img border="0" alt="navigate right" src="../images/nav_right.png"/> animate-elem-36-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							Test name:animate-elem-35-t
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=80 height=60>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-35-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=80 height=60 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-35-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster of animate-elem-35-t" src="../png/tiny-animate-elem-35-t.png" width="80" height="60"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               </center>
<div class="opscript">
         <p>
            The purpose of this test is to test animation of attributes stroke-dasharray,
            stroke-dashoffset, stroke-miterlimit, stroke-linecap and stroke-linjoin.
         </p>
         <p>
            This file contains four tests, testing animation of five attributes.
            The first test animates the stroke-dashoffset. There are seven reference polylines, all with
            the same stroke-dasharray but with different values on their stroke-dashoffset. A red polyline
            with the same stroke-dash array has an animation on its stroke-dasharray. The red polyline is
            animated so that it stops by the reference polyline that has the right stroke-dashoffset at
            that perticular time.
            The second test animates stroke-linecap and stroke-linejoin. There are three reference
            polylines. Comparsion is done in the same manner as in the previous test.
            The third test animates the stroke-miterlimit. There are two sets offilled reference paths
            (black) and two outlined paths (red) with animated stroke-miterlimit. The paths are shaped like
            a capital A. In the upper test the animated path is drawn on top of the reference polygons and
            in the lower test the reference path is drawn on top of the animated path. As the
            stroke-miterlimit is animated to different values, different reference paths are used. To pass
            the test, there should never be any part of the underlying geometry visible (black in the upper
            or red in the lower).
            The fourth test animates the stroke-dasharray. The initial stroke-dasharray gives a
            short-dashed line. This pattern is animated into a pattern that on this short path gives a
            solid line at 2 seconds.
         </p>

		</div>
	</body>
</html>
